import 'dart:ffi';

import 'package:flutter/material.dart';
import 'package:flutterapp/util/colorUtil.dart';

class FormPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _FormPageState();
}

final _inputController = TextEditingController();

class _FormPageState extends State<FormPage> {
  TableRow _titleRow() => TableRow(children: [
        Container(
          alignment: Alignment.center,
          width: 80,
          child: Text("组件", style: TextStyle(fontWeight: FontWeight.bold)),
        ),
        Container(
          width: double.infinity,
          alignment: Alignment.center,
          child: Text("效果", style: TextStyle(fontWeight: FontWeight.bold)),
        )
      ]);

  TableRow _textField() => TableRow(children: [
        Container(
          alignment: Alignment.center,
          child: Text("TextField\n普通输入框"),
        ),
        Container(
          padding: EdgeInsets.fromLTRB(15, 0, 15, 5),
          child: TextField(
            decoration: InputDecoration(
                hintText: "这是一个文本框",
                hintStyle: TextStyle(fontSize: 14),
                contentPadding: EdgeInsets.all(5)),
          ),
        )
      ]);

  TableRow _textPwd() => TableRow(children: [
        Container(
          alignment: Alignment.center,
          child: Text("TextField\n密码输入框"),
        ),
        Container(
          padding: EdgeInsets.fromLTRB(15, 0, 15, 5),
          child: TextField(
            obscureText: true,
            decoration: InputDecoration(
                hintText: "这是一个密码输入框",
                hintStyle: TextStyle(fontSize: 14),
                contentPadding: EdgeInsets.all(5)),
          ),
        )
      ]);

  TableRow _text4Value() => TableRow(children: [
        Container(
          alignment: Alignment.center,
          child: Text("TextField\n输入框取值"),
        ),
        Container(
          padding: EdgeInsets.fromLTRB(15, 0, 15, 5),
          child: Column(
            children: <Widget>[
              TextField(
                decoration: InputDecoration(
                    hintText: "请输入文本内容",
                    hintStyle: TextStyle(fontSize: 14),
                    contentPadding: EdgeInsets.all(5)),
                controller: _inputController,
              ),
              MaterialButton(
                child: Text("获取文本内容"),
                color: ColorUtil.hexStringColor("#8552a1"),
                textColor: Colors.white,
                onPressed: () {
                  setState(() {});
                },
              ),
              Text(_inputController.text)
            ],
          ),
        )
      ]);

  bool _basketBallCheck = false, _footBallCheck = false, _swimmingCheck = false;
  List<String> checkChoose = List<String>();

  TableRow _checkRow() => TableRow(children: [
        Container(
          alignment: Alignment.center,
          child: Text("CheckBox\n复选框"),
        ),
        Container(
            padding: EdgeInsets.all(10),
            child: Column(
              children: <Widget>[
                Row(
                  children: <Widget>[
                    Text("篮球"),
                    Checkbox(
                      value: _basketBallCheck,
                      tristate: false,
                      onChanged: (bool) {
                        setState(() {
                          _basketBallCheck = bool;
                          if (bool)
                            checkChoose.add("篮球");
                          else
                            checkChoose.remove("篮球");
                        });
                      },
                    ),
                    Text("足球"),
                    Checkbox(
                      value: _footBallCheck,
                      tristate: false,
                      onChanged: (bool) {
                        setState(() {
                          _footBallCheck = bool;
                          if (bool)
                            checkChoose.add("足球");
                          else
                            checkChoose.remove("足球");
                        });
                      },
                    ),
                    Text("游泳"),
                    Checkbox(
                      value: _swimmingCheck,
                      tristate: false,
                      onChanged: (bool) {
                        setState(() {
                          _swimmingCheck = bool;
                          if (bool)
                            checkChoose.add("游泳");
                          else
                            checkChoose.remove("游泳");
                        });
                      },
                    )
                  ],
                ),
                MaterialButton(
                  color: ColorUtil.hexStringColor("#8552a1"),
                  textColor: Colors.white,
                  child: Text("获取选择内容"),
                  onPressed: () {
                    showDialog(
                        context: context,
                        barrierDismissible: false,
                        builder: (BuildContext context) {
                          return AlertDialog(
                            title: Text("您选择了",
                                style: TextStyle(
                                    fontSize: 16, fontWeight: FontWeight.bold)),
                            content: Text(checkChoose.toString()),
                            actions: <Widget>[
                              FlatButton(
                                child: Text("确定"),
                                onPressed: () {
                                  Navigator.pop(context);
                                },
                              )
                            ],
                          );
                        });
                  },
                )
              ],
            ))
      ]);

  List<bool> _listCheck = [false, false, false, false];

  TableRow _checkListRow() => TableRow(children: <Widget>[
        Container(
          alignment: Alignment.center,
          padding: EdgeInsets.fromLTRB(5, 0, 5, 0),
          child: Text("Checkbox\nListTile\n复选框"),
        ),
        Container(
          child: Column(
            children: <Widget>[
              CheckboxListTile(
                title: Text("飞机"),
                secondary: Icon(
                  Icons.local_airport,
                  color: Colors.lightGreen,
                ),
                value: _listCheck[0],
                onChanged: (bool) {
                  setState(() {
                    _listCheck[0] = bool;
                  });
                },
              ),
              CheckboxListTile(
                title: Text("汽车"),
                secondary: Icon(
                  Icons.directions_bus,
                  color: Colors.lightBlue,
                ),
                value: _listCheck[1],
                onChanged: (bool) {
                  setState(() {
                    _listCheck[1] = bool;
                  });
                },
              ),
              CheckboxListTile(
                title: Text("自行车"),
                secondary: Icon(
                  Icons.directions_bike,
                  color: Colors.deepPurple,
                ),
                value: _listCheck[2],
                onChanged: (bool) {
                  setState(() {
                    _listCheck[2] = bool;
                  });
                },
              ),
              CheckboxListTile(
                title: Text("步行"),
                secondary: Icon(
                  Icons.directions_walk,
                  color: Colors.deepOrangeAccent,
                ),
                value: _listCheck[3],
                onChanged: (bool) {
                  setState(() {
                    _listCheck[3] = bool;
                  });
                },
              ),
              RaisedButton(
                color: ColorUtil.hexStringColor("#8552a1"),
                textColor: Colors.white,
                child: Text("获取选择内容"),
                onPressed: () {
                  List<String> _values = List<String>();
                  _listCheck.asMap().forEach((i, v) {
                    if (v) {
                      switch (i) {
                        case 0:
                          _values.add("飞机");
                          break;
                        case 1:
                          _values.add("汽车");
                          break;
                        case 2:
                          _values.add("自行车");
                          break;
                        case 3:
                          _values.add("步行");
                          break;
                      }
                    }
                  });
                  showDialog(
                      context: context,
                      barrierDismissible: false,
                      builder: (BuildContext context) {
                        return AlertDialog(
                          title: Text("您选择了",
                              style: TextStyle(
                                  fontSize: 16, fontWeight: FontWeight.bold)),
                          content: Text(_values.toString()),
                          actions: <Widget>[
                            FlatButton(
                              child: Text("确定"),
                              onPressed: () {
                                Navigator.pop(context);
                              },
                            )
                          ],
                        );
                      });
                },
              )
            ],
          ),
        )
      ]);

  int _groupValue = 1;

  TableRow _radioRow() => TableRow(children: <Widget>[
        Container(
          alignment: Alignment.center,
          child: Text("Radio\n单选框"),
        ),
        Container(
          margin: EdgeInsets.fromLTRB(10, 0, 10, 0),
          child: Row(
            children: <Widget>[
              Text("篮球"),
              Radio(
                value: 1,
                groupValue: _groupValue,
                onChanged: (v) {
                  setState(() {
                    _groupValue = v;
                  });
                },
              ),
              Text("足球"),
              Radio(
                value: 2,
                groupValue: _groupValue,
                onChanged: (v) {
                  setState(() {
                    _groupValue = v;
                  });
                },
              ),
              Text("游泳"),
              Radio(
                value: 3,
                groupValue: _groupValue,
                onChanged: (v) {
                  setState(() {
                    _groupValue = v;
                  });
                },
              )
            ],
          ),
        )
      ]);

  String _listRadioValue = "飞机";

  TableRow _radioListTileRow() => TableRow(children: <Widget>[
        Container(
          alignment: Alignment.center,
          child: Text("RadioListTile\n单选组件"),
        ),
        Container(
          child: Column(
            children: <Widget>[
              RadioListTile<String>(
                secondary: Icon(
                  Icons.local_airport,
                  color: Colors.lightGreen,
                ),
                title: Text("飞机"),
                value: "飞机",
                groupValue: _listRadioValue,
                onChanged: (v) {
                  setState(() {
                    this._listRadioValue = v;
                  });
                },
              ),
              RadioListTile<String>(
                secondary: Icon(
                  Icons.directions_bus,
                  color: Colors.lightBlue,
                ),
                title: Text("汽车"),
                value: "汽车",
                groupValue: _listRadioValue,
                onChanged: (v) {
                  setState(() {
                    this._listRadioValue = v;
                  });
                },
              ),
              RadioListTile<String>(
                secondary: Icon(
                  Icons.directions_bike,
                  color: Colors.deepPurple,
                ),
                title: Text("自行车"),
                value: "自行车",
                groupValue: _listRadioValue,
                onChanged: (v) {
                  setState(() {
                    this._listRadioValue = v;
                  });
                },
              ),
              RadioListTile<String>(
                secondary: Icon(
                  Icons.directions_walk,
                  color: Colors.deepOrangeAccent,
                ),
                title: Text("步行"),
                value: "步行",
                groupValue: _listRadioValue,
                onChanged: (v) {
                  setState(() {
                    this._listRadioValue = v;
                  });
                },
              )
            ],
          ),
        )
      ]);

  bool _switchValue = true;

  TableRow _switchRow() => TableRow(children: [
        Container(
          alignment: Alignment.center,
          child: Text("Switch\n组件"),
        ),
        Container(
          child: SwitchListTile(
            value: _switchValue,
            title: Text(
              "开启消息推送",
              style: TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: 14,
                  fontStyle: FontStyle.italic),
            ),
            onChanged: (v) {
              setState(() {
                _switchValue = v;
              });
            },
          ),
        )
      ]);

  double _sliderValue = 20.0;

  TableRow _sliderRow() => TableRow(children: [
        Container(
          alignment: Alignment.center,
          child: Text("Slider\n组件"),
        ),
        Container(
          child: Slider(
            min: 0,
            max: 100,
            divisions: 100,
            value: _sliderValue,
            label: _sliderValue.round().toString(),
            onChanged: (v) {
              setState(() {
                _sliderValue = v;
              });
            },
          ),
        )
      ]);

  List<TableRow> _tableRow() {
    final list = List<TableRow>();
    //table 标题
    list.add(_titleRow());
    //普通文本
    list.add(_textField());
    //密码输入框
    list.add(_textPwd());
    //输入框获值
    list.add(_text4Value());
    //checkBox
    list.add(_checkRow());
    //checkBoxListTile
    list.add(_checkListRow());
    //RadioBox
    list.add(_radioRow());
    //RadioListTile
    list.add(_radioListTileRow());
    //Switch
    list.add(_switchRow());
    list.add(_sliderRow());
    return list;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("常用form表单组件"),
      ),
      body: Container(
        width: double.infinity,
        height: double.infinity,
        child: Scrollbar(
          child: SingleChildScrollView(
            padding: EdgeInsets.all(10),
            child: Column(
              children: [
                Table(
                  border: TableBorder.all(
                      color: ColorUtil.hexStringColor("#a1a3a6"),
                      width: 1,
                      style: BorderStyle.solid),
                  defaultVerticalAlignment: TableCellVerticalAlignment.middle,
                  columnWidths: {0: IntrinsicColumnWidth(), 1: FlexColumnWidth()},
                  children: _tableRow(),
                ),
                Container(
                  margin: EdgeInsets.fromLTRB(15, 25, 15, 10),
                  child: Text("这里只是做了一些简单的组件使用，具体详细请查看文档或者google",
                  style: TextStyle(
                    color: Colors.deepOrangeAccent,
                    fontSize: 16,
                    fontWeight: FontWeight.bold
                  )),
                )
              ],
            )
          ),
        ),
      ),
    );
  }
}
